<template>
	<view class="selectCate">
		<navBar isBack title="商品分类" color="#333" backColor="#333" background="#fff"></navBar>
		<view class="box">
			<h3>选择分类</h3>
			<view class="cateBox">
				<scroll-view scroll-y="true" style="width: 350rpx;height: 780rpx;" class="left">
					<view class="item" v-for="(item,index) in cateList" :key="index" @click="selectOne(index)">{{item.name}}</view>
				</scroll-view>
				<scroll-view scroll-y="true" style="width: 350rpx;height: 780rpx;" class="left">
					<view class="not">
						请先选择上级
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" style="width: 350rpx;height: 780rpx;" class="left">
					<view class="item">沙发</view>
					<view class="item">沙发</view>
					<view class="item">沙发</view>
					<view class="item">沙发</view>
					<view class="item">沙发</view>
					<view class="item">沙发</view>
					<view class="item">沙发</view>
					<view class="item">沙发</view>
				</scroll-view>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="toSubmit">确定</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				cateList:[{
					name:'沙发',
					id:1
				},{
					name:'沙发',
					id:2
				},{
					name:'沙发',
					id:3
				},{
					name:'沙发',
					id:4
				},{
					name:'沙发',
					id:5
				},{
					name:'沙发',
					id:6
				},{
					name:'沙发',
					id:7
				},{
					name:'沙发',
					id:8
				},]
			}
		},
		onLoad() {
			// this.getCateList()
		},
		methods:{
			// getCateList(){
			// 	this.$api.getFirst().then(res=>{
			// 		console.log(res,'一级分类')
			// 		if(res.code==1){
			// 			this.cateList = res.data?res.data:[]
			// 		}
			// 	})
			// },
			
			// 选择一级分类
			selectOne(index){
				
			}
		}
	}
</script>

<style lang="scss">
	.selectCate{
		.box{
			padding: 40rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			width: 702rpx;
			margin: 24rpx auto;
			h3{
				width: 100%;
				text-align: center;
				font: 500 28rpx/42rpx PingFang SC;
				color: #333;
			}
			.cateBox{
				width: 100%;
				display: flex;
				font: 400 24rpx/44rpx PingFang SC;
				color: #333;
				.left{
					.item{
						width: 100%;
						margin: 20rpx 0;
						text-align: center;
					}
					border-right: 2rpx solid #F4F4F4;
					
				}
				.not{
					color: #A0A0A0;
					text-align: center;
					line-height: 780rpx;
				}
				.active{
					color: #DBA954;
				}
			}
		}
		.btn{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			height: calc(120rpx+ constant(safe-area-inset-bottom));
			height: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			button{
				width: 606rpx;
				height: 80rpx;
				border-radius: 46rpx;
				margin: 20rpx auto;
				background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 3px 6px rgba(219, 169, 84, 0.3);
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
				
			}
		}
	}
</style>
